<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>


    <style>
        .d1{
            border: 1px red solid;
            height: 15px;border-radius: 5px;
        }
        .d2{
            border: 1px blue solid;
            height: 15px;border-radius: 5px;
        }
        .d3{
            border: 1px green solid;
            height: 15px;border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--el-row表示一行-->
    <el-row>
        <!--el-col表示一列,一行最多24分栏,也就是说span属性的最大值为24 ,并且不一定等分-->
        <el-col span="12"><div class="d1"></div></el-col>
        <el-col span="12"><div class="d1"></div></el-col>
    </el-row>
    <!--gutter属性是设置间距-->
    <el-row gutter="20">
        <el-col span="8"><div class="d2"></div></el-col>
        <el-col span="8"><div class="d2"></div></el-col>
        <el-col span="8"><div class="d2"></div></el-col>
    </el-row>
    <!--设置居中-->
    <div style="width: 1200px;margin: auto">
        <el-col span="8"><div class="d2"></div></el-col>
        <el-col span="8"><div class="d2"></div></el-col>
        <el-col span="8"><div class="d2"></div></el-col>
    </div>
    <h1>1:3:1:1  居中 10像素间距</h1>
    <div style="width: 1200px;margin: auto">
        <el-row gutter="10">
            <el-col span="4"><div class="d3"></div></el-col>
            <el-col span="12"><div class="d3"></div></el-col>
            <el-col span="4"><div class="d3"></div></el-col>
            <el-col span="4"><div class="d3"></div></el-col>
        </el-row>
    </div>
    <h1>列偏移</h1>
    <el-row>
    <!--  offset:设置列偏移的列数  -->
    <!--    偏移的列比例不变,宽高是变的-->
        <el-col span="20" offset="3"><div class="d3"></div></el-col>
    </el-row>
    <el-row gutter="20">
        <el-col span="6"><img src="imgs/a.jpg" alt="" width="100%"></el-col>
        <el-col span="6"><img src="imgs/b.jpg" alt="" width="100%"></el-col>
        <el-col span="6"><img src="imgs/c.jpg" alt="" width="100%"></el-col>
        <el-col span="6"><img src="imgs/d.jpg" alt="" width="100%"></el-col>
    </el-row>
</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods:{

        }
    })
</script>
</html>